<!-- #layout name=blank-->
<style>
  #permission-area {
    border-radius: 2px;
    border: 1px solid #e5e5e5;
  }
</style>
<div id="app" v-cloak>
  <div class="page-header">
    <h1 class="title">Roles</h1>
  </div>
  <kb-breadcrumb :breads="breads"></kb-breadcrumb>
  <div class="navbar navbar-default">
    <div class="container-fluid">
      <a href="javascript:;" class="btn green navbar-btn" @click="onCreate"
        >Create</a
      >
      <a v-if="selected.length > 0" @click="onDelete" class="btn red navbar-btn"
        >Delete</a
      >
    </div>
  </div>
  <kb-table :data="tableData" :show-select="true" :selected.sync="selected">
    <kb-table-column label="Role Name">
      <template v-slot="row">
        <span :class="['label', row.name.class]">{{ row.name.text }}</span>
      </template>
    </kb-table-column>
    <kb-table-column head-class="table-action" body-class="table-action">
      <template v-slot="row">
        <a
          :class="['btn btn-sm', row.edit.class || 'blue' ]"
          @click.stop="onEdit(row)"
        >
          {{ row.edit.text }}
        </a>
      </template>
    </kb-table-column>
  </kb-table>
  <div
    class="modal fade"
    v-kb-modal="showEditModal"
    data-keyboard="false"
    data-backdrop="static"
  >
    <div class="modal-dialog">
      <div class="modal-content">
        <div class="modal-header">
          <button class="close" @click="onModalHide">
            <i class="fa fa-close"></i>
          </button>
          <h4 class="modal-title">Edit</h4>
        </div>
        <div class="modal-body">
          <kb-form :model="roleForm" :rules="roleRules" ref="roleForm">
            <kb-form-item prop="name">
              <label class="col-md-3 control-label">Role name</label>
              <div class="col-md-9">
                <input
                  v-if="!isEdit"
                  type="text"
                  class="form-control"
                  v-model="roleForm.name"
                />
                <p v-else class="form-control-static">{{ roleForm.name }}</p>
              </div>
            </kb-form-item>
            <div class="form-group">
              <label for="" class="col-md-3 control-label">Permission</label>
              <div class="col-md-9" id="area">
                <div id="permission-area"></div>
              </div>
            </div>
          </kb-form>
        </div>
        <div class="modal-footer">
          <button class="btn green" @click="onSaveRole">Save</button>
          <button class="btn gray" @click="onModalHide">Cancel</button>
        </div>
      </div>
    </div>
  </div>
</div>
<script>
  (function() {
    Kooboo.loadJS([
      "/_Admin/Scripts/components/kbTable.js",
      "/_Admin/Scripts/components/kbBreadcrumb.js",
      "/_Admin/Scripts/lib/jstree.min.js",
      "/_Admin/Scripts/components/kbForm.js"
    ]);
    Kooboo.loadCSS(["/_Admin/Styles/jstree/style.min.css"]);
  })();
</script>
<script src="/_Admin/View/System/Roles.js"></script>
